<template>
  <el-dialog
    :title="$t('buyer.details')"
    :visible.sync="dialogVisible"
    :show="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="800px"
    :before-close="handleClose"
    @open="open"
  >
    <el-form
      ref="form"
      v-loading="infoLoading"
      :model="info"
      label-width="100px"
    >
      <el-scrollbar ref="myScrollbar" class="form-scrollbar">
        <div class="el-dialog-div">
          <el-form-item :label="$t('buyer.releaseTime')">
            {{ info.releaseTime }}
          </el-form-item>
          <el-form-item :label="$t('buyer.expireTime')">
            {{ info.expireTime }}
          </el-form-item>
          <el-form-item :label="$t('common.nation')">
            {{ info.country }}
          </el-form-item>
          <el-form-item :label="$t('buyer.countryFlag')">
            {{ info.countryFlag }}
          </el-form-item>
          <el-form-item :label="$t('buyer.image')">
            <div>
              <el-image
                style="height: 100px; margin: 10px"
                v-for="item in info.image"
                :key="item.url"
                :src="item.url"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </el-form-item>
          <el-form-item :label="$t('buyer.link')">
            <el-link type="primary" target="_blank" :href="info.urlLink">{{
              info.urlLink
            }}</el-link>
          </el-form-item>
          <el-form-item :label="$t('buyer.demand')">
            {{ info.requireQuantity }}
          </el-form-item>
          <el-form-item :label="$t('buyer.address')">
            {{ info.address }}
          </el-form-item>
          <el-form-item :label="$t('buyer.contact')">
            {{ info.contacts }}
          </el-form-item>
          <el-form-item :label="$t('common.email')">
            {{ info.mailbox }}
          </el-form-item>
          <el-form-item :label="$t('buyer.wechat')">
            {{ info.wechat }}
          </el-form-item>
          <el-form-item :label="$t('buyer.phone')">
            {{ info.phone }}
          </el-form-item>
          <el-form-item :label="$t('buyer.details')">
            <div>{{ info.details }}</div>
          </el-form-item>
          <el-form-item :label="$t('buyer.categoryStubs')">
            {{ info.categoryStubs }}
          </el-form-item>
        </div>
      </el-scrollbar>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'info',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      dialogVisible: this.show,
      // 页面元素
      info: {},
      infoLoading: true,
    }
  },

  watch: {
    show() {
      this.dialogVisible = this.show
      this.initForm = true
    },
  },
  methods: {
    async open() {
      this.infoLoading = true
      this.info = this.rowData
      console.log()
      this.info.image = JSON.parse(this.rowData.image)
      this.infoLoading = false
    },
    handleClose(done) {
      this.$emit('update:show', false)
      this.$emit('closeAction')
    },
  },
}
</script>

<style scoped></style>
